<template>
  <div class="m-controler" >
    <h2 class="title">STEP1.选择门店&主题</h2>
    <div class="m-btn" @click="chooseTheme"> <i class="el-icon-refresh"></i>选择门店&主题</div>
    <div class="controler-box" v-if="parcel.length">
      <dl class="theme-list clrfix"  v-for="item in parcel">
        <dt>{{item.shop_name}}</dt>
        <ul >
          <li v-for="list in item.theme_info">{{list.theme_name}}</li>
        </ul>
      </dl>
    </div>
  </div>
</template>

<script>
    export default {
        name: "chooseTheme",
        props:['parcel'],
        methods:{
          chooseTheme(){
            this.$emit('upload');
          }
        }
    }
</script>

<style scoped lang = "scss">
  .m-controler{
    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }
    .m-btn{
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding:5px 10px;
      cursor: pointer;
      margin-left:10px
    }
    .controler-box{
      background: #FFFFFF;
      box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
      padding: 30px 0 10px 30px;
      margin-bottom:20px;
    }
    .theme-list{
      dt{
        display: inline-block;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        width:25%;
        vertical-align: top;
      }
      ul{
        display: inline-block;
        width:70%;
      }
      li{
        display: inline-block;
        margin: 0 30px 20px 0;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
      }

    }
  }
</style>
